<template>
  <div>
    <h2>在线报名</h2>
    <li>
      <p>选手名称</p>
      <input
        type="number"
        placeholder="请输出选手名称"
        placeholder-style="color: rgb(202, 202, 202);font-size:12px;"
      />
    </li>
    <li>
      <p>手机号</p>
      <input
        type="number"
        placeholder="请输入手机号"
        placeholder-style="color: rgb(202, 202, 202);font-size:12px;"
      />
    </li>
    <li>
      <p>分组</p>
      <picker
        class="pickernoe"
        mode="selector"
        @change="changeNextCol"
        :index="index"
        :range="array"
      >
        <view class="picker">{{array[index]}}</view>
      </picker>
    </li>
    <li>
      <p>选手描述</p>
      <input
        type="number"
        placeholder="请输入选手描述"
        placeholder-style="color: rgb(202, 202, 202);font-size:12px;"
      />
    </li>
    <p>上传选手图片(1-3装)</p>
    <div @click="shangcan" class="div-box">
      <img src="/static/tabs/1.png" alt />
    </div>
    <button type="primary" form-type="submit" size="default">提交</button>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      array: ["全部", "分组一", "分钟二"],
      index: 0
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    changeNextCol: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.index = e.mp.detail.value;
    },
    shangcan() {
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
        }
      });
    }
  },
  components: {}
};
</script>
    
<style scoped>
h2 {
  height: 40px;
  color: black;
  text-align: center;
  height: 40px;
  font-weight: 600;
  border-bottom: 1px solid black;
}
li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 10px 0 10px;
  padding-top: 10px;
  align-items: center;
}
.pickerone {
  height: 30px;
}
.picker {
  border: 1px solid rgb(209, 209, 209);
  width: 266px;
  height: 30px;
  flex: 3;
  color: rgb(202, 202, 202);
  font-size: 12px;
  height: 30px;
}
p {
  flex: 1;
  color: rgb(134, 134, 134);
}
input {
  border: 1px solid rgb(209, 209, 209);
  width: 60%;
  height: 30px;
  flex: 3;
}
li:nth-child(5) {
  height: 100px;
  display: flex;
  justify-content: space-between;
}
li:nth-child(5) input {
  height: 80px;
}
.div-box image {
  width: 80px;
  height: 80px;
}
button {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
